<!-- 
移动端开发方案
    1、单独页面制作
        - PC端制作一个页面、移动端制作一个页面，各自是独立的
        - 通过判断设备，自适应打开移动端页面或PC端页面
        - 一般情况下在域名前面加【m】打开的就是移动端页面
            移动端 【m.jd.com】【m.suning.com】【m.taobao.com】
            PC端   【www.jd.com】
        - 它是目前主流的方案，缺点是需要写多个页面

    2、响应式页面制作
        - 兼容移动端、PC端的页面（两种页面混在一起形成新的混合页面）
        - 根据屏幕尺寸调整不同样式，自适应不同页面
        - 三星官网【www.samsung.com】，自己调整屏幕去观察
        - 好处：只需要写一个页面
        - 坏处：制作麻烦，需要花费更多精力去调整页面来适应不同屏幕尺寸，
               同时需要处理兼容性问题，因为响应式基本是CSS3、HTML5的新特性


移动端技术解决方案
    - 背景说明
        移动端浏览器基本是webkit内核，所以只需要考虑webkit兼容性即可，
        也就是说要考虑【老版本浏览器】的兼容性时，只需添加私有前缀【-webkit-xxx】就行，
        另外，webkit内核对CSS3、HTML5都可以很好的支持，
        故移动端开发的兼容性不再是个大问题，放心使用新特性。

    - 移动端CSS初始化
        http://necolas.github.io/normalize.css/

    - CSS3盒子模型
        box-sizing: content-box;  // 或者默认不写的，就是传统模型
            传统模型（会撑大盒子）  
                盒子宽度 = width + border + padding
        box-sizing: border-box;
            CSS3模型（不会撑大盒子）
                盒子宽度 = width
            提示：
                border、padding属于width中的一部分，
                页面中呈现的盒子效果是手动设置的width宽度，
                但真正的width宽度是经过CSS3模型处理后的产物，即用width减去border、padding后的宽度
        注意，外边距margin不是盒子的一部分，因为它是盒子之间的空隙。
 -->
<style>
  * {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
  }
  .one {
    /* 传统模型 */
    /* 盒子宽度 = 200 + 5*2 + 10*2 = 230px */
    /* 会撑开盒子，影响周边布局 */
    box-sizing: content-box;
    width: 200px;
    height: 300px;
    border: 5px solid red;
    padding: 10px;
    background-color: skyblue;
  }
  .two {
    /* CSS3模型 */
    /* 盒子宽度 = 170 + 5*2 + 10*2 = 200px */
    /* 不会撑开盒子，只是内容往里压缩，不影响周边布局 */
    box-sizing: border-box;
    width: 200px;
    height: 300px;
    border: 5px solid red;
    padding: 10px;
    background-color: skyblue;
  }
</style>

<div class="one">传统模型</div>
<div class="two">CSS3模型</div>
